<template>
	<div class="top-box">
		<!-- 通知公告滚动条 -->
		<slot name="notice"></slot>

		<!-- 企业名称标签 -->
		<div class="group-name" v-if="groupName">{{ companyTag }}</div>

		<!-- 用户欢迎文字 -->
		<div class="user-name">
			您好<span class="welcome-gth">!</span>
			<span class="welcome">{{ loginName || '欢迎使用政企通服务' }}</span>
		</div>
	</div>
</template>
<script>
import { computed } from 'vue'

export default {
	name: 'TopWelcome',
	props: {
		loginName: {
			type: String,
			default: '',
		},
		groupName: {
			type: String,
			default: '',
		},
	},
	setup(props) {
		const companyTag = computed(() => {
			// 返回企业名称，可以根据需要添加前缀或后缀
			return props.groupName || ''
		})

		return {
			companyTag,
		}
	},
}
</script>

<style lang="less" scoped>
.top-box {
	position: relative;
	height: 152px;
	margin: 16px 16px 0 16px;
	background-image: url('https://wx.ksepia.com/profile/mini-image/v2-img-bannerx3-ks.png');
	background-size: 100% 100%;
	background-position: cover;
	border-radius: 10px;
	overflow: hidden;
}

.group-name {
	position: absolute;
	bottom: 65px;
	right: 10px;
	font-size: 14px;
	color: #ffffff;
	z-index: 1;
}

.user-name {
	position: absolute;
	bottom: 65px;
	left: 16px;
	z-index: 1;
	color: #f6f6f6;
	font-size: 16px;

	.welcome-gth {
		margin-left: 6px;
		color: #f6f6f6;
	}

	.welcome {
		font-size: 20px;
		margin-left: 20px;
		color: #f6f6f6;
		font-weight: bold;
	}
}

// 通知公告样式
:deep(.notice) {
	position: absolute;
	left: 0;
	right: 16px;
	z-index: 2;
	font-size: 14px;
	color: #fff8e7;
}
</style>
